<template>
  <div>
    <div class="my-nav"><span>我的</span></div>
    <div class="imgbox">
      <img
        src="https://img.meituan.net/maoyanuser/c524afeb2e56c93093a1b7c26d5ac6b114424.png"
        alt=""
      />
    </div>
    <!-- 我的订单 -->
    <div class="shop">
      <van-divider
        :style="{
          color: '#000',
          padding: '0 100px',
          fontSize: '20px',
          margin: '0px 0 20px 0',
          paddingTop: '10px'
        }"
      >
        我的订单
      </van-divider>
      <van-grid clickable :column-num="2">
        <van-grid-item icon="video" text="电影" to="orderlist" />
        <van-grid-item icon="goods-collect" text="商城" to="shoplist" />
      </van-grid>
    </div>
    <!-- 优惠券单元格 -->
    <van-cell title="优惠券" is-link />
    <van-cell title="折扣卡" is-link />
    <van-cell title="退出账户" is-link to="movielogin" />
  </div>
  <router-view></router-view>
</template>

<script>
export default {
  setup() {
    const exit = () => {
      console.log('exit...')
    }
    return {
      exit
    }
  }
}
</script>

<style lang="scss" scoped>
.my-nav {
  height: 50px;
  width: 100%;
  background: #e54847;
  text-align: center;
  span {
    font-size: 20px;
    color: #fff;
    line-height: 50px;
  }
}
.imgbox {
  height: 190px;
  width: 100%;
  background: #f03d37;
  position: relative;
  margin-bottom: 20px;
  img {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;

    height: 50px;
    width: 50px;
    border: 0.03rem solid #fff;
    border-radius: 50%;
  }
}
.shop {
  height: 180px;
  width: 100%;
}
</style>
